<template>
  <div>
    <el-container>
      <el-aside style="width:182px" class="aside-box">
		<div>
			<img src="../assets/logo2.png" alt="" srcset="" class="image-logo">
		</div>
        <div class="menu-preview">
          <el-menu
            class="el-menu-horizontal-demo"
            :default-active="activeIndex"
            :unique-opened="true"
            mode="horizontal"
            :router="true"
            @select="handleSelect"
          >
            <el-menu-item
              v-for="(menu, index) in menuList"
              :index="index + ''"
              :key="index"
              :route="menu.url"
            >
              <div class="menu-button">
                <i v-if="true" :class="iconArr[index]"></i>
                <span>{{menu.name}}</span>
              </div>
            </el-menu-item>

            <el-menu-item
              :index="menuList.length + 2 + ''"
              v-if="Token && notAdmin"
              @click="goMenu('/index/center')"
            >
              <div class="menu-button">
                <i v-if="true" class="el-icon-user"></i>
                <span>个人中心</span>
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header style="height:60px" class="header-box">
          <div class="top-container">
            <div class="hxlBox">
              <div></div>
              <div class="hxl">
                <div v-if="!Token" @click="toLogin()">登录/注册</div>
                <div v-if="Token" @click="logout">退出登录</div>
                <div v-if="Token" class="username">{{username}}</div>
              </div>
            </div>
          </div>
        </el-header>
        <!-- 内容区 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      activeIndex: "0",
      roleMenus: [
        {
          backMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-taxi",
                  buttons: ["新增", "查看", "修改", "删除"],
                  menu: "用户",
                  menuJump: "列表",
                  tableName: "yonghu"
                }
              ],
              menu: "用户管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-form",
                  buttons: ["新增", "查看", "修改", "删除"],
                  menu: "电影分类",
                  menuJump: "列表",
                  tableName: "dianyingfenlei"
                }
              ],
              menu: "电影分类管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-brand",
                  buttons: [
                    "新增",
                    "查看",
                    "修改",
                    "删除",
                    "查看评论",
                    "电影分类统计",
                    "导演统计"
                  ],
                  menu: "电影信息",
                  menuJump: "列表",
                  tableName: "dianyingxinxi"
                }
              ],
              menu: "电影信息管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-full",
                  buttons: ["查看", "修改", "删除", "审核"],
                  menu: "用户分享",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享管理"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-message",
                  buttons: ["查看", "修改", "回复", "删除"],
                  menu: "在线留言",
                  tableName: "messages"
                }
              ],
              menu: "在线留言"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-shop",
                  buttons: ["查看", "修改"],
                  menu: "关于我们",
                  tableName: "aboutus"
                },
                {
                  appFrontIcon: "cuIcon-phone",
                  buttons: ["查看", "修改"],
                  menu: "轮播图管理",
                  tableName: "config"
                },
                {
                  appFrontIcon: "cuIcon-news",
                  buttons: ["新增", "查看", "修改", "删除"],
                  menu: "公告信息",
                  tableName: "news"
                }
              ],
              menu: "系统管理"
            }
          ],
          frontMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-similar",
                  buttons: ["查看"],
                  menu: "电影信息列表",
                  menuJump: "列表",
                  tableName: "dianyingxinxi"
                }
              ],
              menu: "电影信息模块"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-taxi",
                  buttons: ["新增", "查看"],
                  menu: "用户分享列表",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享模块"
            }
          ],
          hasBackLogin: "是",
          hasBackRegister: "否",
          hasFrontLogin: "否",
          hasFrontRegister: "否",
          roleName: "管理员",
          tableName: "users"
        },
        {
          backMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-full",
                  buttons: ["查看", "修改", "删除", "查看评论"],
                  menu: "用户分享",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享管理"
            }
          ],
          frontMenu: [
            {
              child: [
                {
                  appFrontIcon: "cuIcon-similar",
                  buttons: ["查看"],
                  menu: "电影信息列表",
                  menuJump: "列表",
                  tableName: "dianyingxinxi"
                }
              ],
              menu: "电影信息模块"
            },
            {
              child: [
                {
                  appFrontIcon: "cuIcon-taxi",
                  buttons: ["新增", "查看"],
                  menu: "用户分享列表",
                  menuJump: "列表",
                  tableName: "yonghufenxiang"
                }
              ],
              menu: "用户分享模块"
            }
          ],
          hasBackLogin: "否",
          hasBackRegister: "否",
          hasFrontLogin: "是",
          hasFrontRegister: "是",
          roleName: "用户",
          tableName: "yonghu"
        }
      ],
      baseUrl: "",
      carouselList: [],
      menuList: [],
      form: {
        ask: "",
        userid: localStorage.getItem("userid")
      },
      Token: localStorage.getItem("Token"),
      username: localStorage.getItem("username"),
      notAdmin: localStorage.getItem("sessionTable") != '"users"',
      timer: "",
      iconArr: [
        "el-icon-star-off",
        "el-icon-goods",
        "el-icon-warning",
        "el-icon-question",
        "el-icon-info",
        "el-icon-help",
        "el-icon-picture-outline-round",
        "el-icon-camera-solid",
        "el-icon-video-camera-solid",
        "el-icon-video-camera",
        "el-icon-bell",
        "el-icon-s-cooperation",
        "el-icon-s-order",
        "el-icon-s-platform",
        "el-icon-s-operation",
        "el-icon-s-promotion",
        "el-icon-s-release",
        "el-icon-s-ticket",
        "el-icon-s-management",
        "el-icon-s-open",
        "el-icon-s-shop",
        "el-icon-s-marketing",
        "el-icon-s-flag",
        "el-icon-s-comment",
        "el-icon-s-finance",
        "el-icon-s-claim",
        "el-icon-s-opportunity",
        "el-icon-s-data",
        "el-icon-s-check"
      ]
    };
  },
  created() {
    this.baseUrl = this.$config.baseUrl;
    this.menuList = this.$config.indexNav;
    this.getCarousel();
  },
  mounted() {
    this.activeIndex = localStorage.getItem("keyPath") || "0";
  },
  watch: {
    $route(newValue) {
      let that = this;
      let url = window.location.href;
      let arr = url.split("#");
      for (let x in this.menuList) {
        if (newValue.path == this.menuList[x].url) {
          this.activeIndex = x;
        }
      }
      this.Token = localStorage.getItem("Token");
    }
  },
  methods: {
    // 处理菜单选择、
    handleSelect(keyPath) {
      if (keyPath) {
        localStorage.setItem("keyPath", keyPath);
      }
    },
    // 登录
    toLogin() {
      this.$router.push("/login");
    },
    // 登出
    logout() {
      localStorage.clear();
      Vue.http.headers.common["Token"] = "";
      this.$router.push("/index/home");
      this.activeIndex = "0";
      localStorage.setItem("keyPath", this.activeIndex);
      this.Token = "";
      this.$forceUpdate();
      this.$message({
        message: "登出成功",
        type: "success",
        duration: 1000
      });
    },
    getCarousel() {
      this.$http
        .get("config/list", { params: { page: 1, limit: 3 } })
        .then(res => {
          if (res.data.code == 0) {
            this.carouselList = res.data.data.list;
          }
        });
    },
    goBackend() {
      window.open(`http://localhost:8080/admin/dist/index.html`, "_blank");
    },
    goMenu(path) {
      if (!localStorage.getItem("Token")) {
        this.toLogin();
      } else {
        this.$router.push(path);
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.aside-box {
  border-right: 1px solid rgb(219, 219, 218);
  position:sticky;
}
.menu-button {
  width: 120px;
  height: 30px;
  margin: 10px;
  line-height: 30px;
  &:hover {
    background-color: rgb(198, 198, 197);
    border-radius: 5px;
  }
}
.hxlBox {
  display: flex;
  justify-content: space-between;
  .hxl{
	display: flex;
	.username{
		margin-left: 15px;
	}
  }
}
.header-box {
  border-bottom: 1px solid rgb(219, 219, 218);
  line-height: 60px;
  position:sticky;
}
.image-logo{
	width: 170px;
	height: 160px;

}
</style>
